Applying Padding to an Element
Description
Padding adds space between an element's contents and its border.
You can set padding for individual edges, or use a shorthand padding property to apply values in a single declaration.
The padding properties are listed as follows.
- padding-top
Sets the padding for the top edge.
Value: length or % - padding-right
Sets the padding for the right edge.
Value: length or % - padding-bottom
Sets the padding for the bottom edge.
Value: length or % - padding-left
Sets the padding for the left edge.
Value: length or % - padding
This shorthand property sets the padding for all edges in a single declaration.
Value: 1 - 4 length or % values
When specifying padding using percentage values, the percentage is always derived from the width of the containing block.
Example
The following code applies Padding to an Element.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- w ww .ja va 2 s. co m-->
border: 10px double black;
background-color: lightgray;
background-clip: content-box;
padding-top: 0.5em;
padding-bottom: 0.3em;
padding-right: 0.8em;
padding-left: 0.6em;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
</body>
</html>